<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>Hello MUI</title>
		<meta name="viewport" content="width=device-width, initial-scale=1,maximum-scale=1,user-scalable=no">
		<meta name="apple-mobile-web-app-capable" content="yes">
		<meta name="apple-mobile-web-app-status-bar-style" content="black">
		<link rel="stylesheet" type="text/css" href="css/font/iconfont.css"/>
		<link rel="stylesheet" href="css/mui.min.css">
	</head>

	<body>
		<header class="mui-bar mui-bar-nav">
			<button class="iconfont icon-tianjiatupian"onclick="galleryImgs()"></button>
			<h4 style="line-height: 30px;">简历</h4>
			<button class="iconfont icon-tianjiatupian1" onclick="captureImage()"></button>			
		</header>
		<div class="mui-content">
			
			<div class="mui-card">
				<div class="mui-card-header" style="color: white;background: deepskyblue;">个人信息</div>
				<ul class="mui-card-privite">					
					<li><img src="img/logo1.jpg"></li>
					<i id="">Name:Alice</i>
					<li>姓名：史兰兰</li>
					<i id="">Sex:Woman</i>
					<li>性别：女</li>
					<i id="">Age:24</i>
					<li>年龄：24</li>
					<i id="">Favorite:sleeping</i>
					<li>爱好：睡觉</li>
					<i id="">Dreaming:sleeping every day</i>
					<li>梦想：天天睡觉</li>				
				</ul>
			</div>
			<div class="mui-card">
				<div class="mui-card-header" style="color: white;background: deepskyblue;">技能</div>
				<div class="mui-card-content">
					<ul class="mui-card-skill">
						<li>
							<div>模块内容：规范</div>
							<div>模块名称：HTML5、ES5、ES6、CommonJS、CMD、等</div>
							<div>时间：1年</div>
							<div>水平：了解</div>
							
						</li>
						<li>
							<div>模块内容：规范</div>
							<div>模块名称：HTML5、ES5、ES6、CommonJS、CMD、等</div>
							<div>时间：1年</div>
							<div>水平：了解</div>
						</li>
						<li>
							<div>模块内容：规范</div>
							<div>模块名称：HTML5、ES5、ES6、CommonJS、CMD、等</div>
							<div>时间：1年</div>
							<div>水平：了解</div>
						</li>
						<li>
							<div>模块内容：规范</div>
							<div>模块名称：HTML5、ES5、ES6、CommonJS、CMD、等</div>
							<div>时间：1年</div>
							<div>水平：了解</div>
						</li>
						<li>
							<div>模块内容：规范</div>
							<div>模块名称：HTML5、ES5、ES6、CommonJS、CMD、等</div>
							<div>时间：1年</div>
							<div>水平：了解</div>
						</li>	
					</ul>
				</div>
			</div>
			
			<div class="mui-card">
				<div class="mui-card-header" style="height:10vw;color: white;background: deepskyblue;">项目</div>
				<div class="mui-card-content">
					<div class="mui-card-content-inner" style="padding: 0;">
						<ul class="mui-card-project">
							<li class="mui-table-view-cell">
								<div>项目类型：企业网站</div>
								<div>项目名称：和瑞控股</div>
								<div>项目地址：http://www.horays.com</div>
								<div>网站内容：和瑞控股公司的官方网站，详细介绍了和瑞控股公司的主要情况</div>
								<div>项目介绍：项目耗时3周，主要处理前端页面及程序嵌套，当时并未要求移动端适配，故该网站只适应于PC端应用</div>
								<div>应用技术：Html、Css2、Coldfusion等</div>					
							</li>
							<li class="mui-table-view-cell">
								<div>项目类型：企业网站</div>
								<div>项目名称：和瑞控股</div>
								<div>项目地址：http://www.horays.com</div>
								<div>网站内容：和瑞控股公司的官方网站，详细介绍了和瑞控股公司的主要情况</div>
								<div>项目介绍：项目耗时3周，主要处理前端页面及程序嵌套，当时并未要求移动端适配，故该网站只适应于PC端应用</div>
								<div>应用技术：Html、Css2、Coldfusion等</div>		
							</li>
							<li class="mui-table-view-cell">
								<div>项目类型：企业网站</div>
								<div>项目名称：和瑞控股</div>
								<div>项目地址：http://www.horays.com</div>
								<div>网站内容：和瑞控股公司的官方网站，详细介绍了和瑞控股公司的主要情况</div>
								<div>项目介绍：项目耗时3周，主要处理前端页面及程序嵌套，当时并未要求移动端适配，故该网站只适应于PC端应用</div>
								<div>应用技术：Html、Css2、Coldfusion等</div>		
							</li>
						</ul>
					</div>
				</div>
			</div>
			
			<div class="mui-card">
									
					<div class="mui-card-header" style="height:10vw;color: white;background: deepskyblue;">工作经历</div>
					<div class="mui-card-content" >
					<ul class="mui-card-work">
						<li class="mui-table-view-cell">
							<div>公司类型：私营企业</div>
							<div>公司名称：杭州易网灵杰科技有限公司</div>
							<div>公司网站：http://www.eoner.com/</div>
							<div>工作时间：2012年5月-2014年6月</div>
							<div>所在职位：技术支持</div>
							<div>公司规模：40人</div>	
							<div>公司业务：商企通视讯服务平台等</div>	
						</li>
						<li class="mui-table-view-cell">
							<div>公司类型：私营企业</div>
							<div>公司名称：杭州易网灵杰科技有限公司</div>
							<div>公司网站：http://www.eoner.com/</div>
							<div>工作时间：2012年5月-2014年6月</div>
							<div>所在职位：技术支持</div>
							<div>公司规模：40人</div>	
							<div>公司业务：商企通视讯服务平台等</div>	
						</li>				
					</ul>
				</div>
				<div class="mui-card" id="footer"><img src="img/wings.jpg"/>ending<img src="img/wing.jpg"/></div>
			</div>
		</div>
		<script src="js/mui.min.js" type="text/javascript" charset="utf-8"></script>
		<script type="text/javascript">
// 扩展API加载完毕后调用onPlusReady回调函数 
document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
	console.log("plusready");
}
// 拍照
function captureImage(){
	var cmr = plus.camera.getCamera();
	var res = cmr.supportedImageResolutions[0];
	var fmt = cmr.supportedImageFormats[0];
	console.log("Resolution: "+res+", Format: "+fmt);
	cmr.captureImage( function( path ){
			alert( "Capture image success: " + path );  
		},
		function( error ) {
			alert( "Capture image failed: " + error.message );
		},
		{resolution:res,format:fmt}
	);
}

document.addEventListener( "plusready", onPlusReady, false );
// 扩展API加载完毕，现在可以正常调用扩展API 
function onPlusReady() {
}
// 从相册中选择图片 
function galleryImg() {
	// 从相册中选择图片
	console.log("从相册中选择图片:");
    plus.gallery.pick( function(path){
    	console.log(path);
    }, function ( e ) {
    	console.log( "取消选择图片" );
    }, {filter:"image"} );
}
// 从相册中选择多张图片 
function galleryImgs(){
	// 从相册中选择图片
	console.log("从相册中选择多张图片:");
    plus.gallery.pick( function(e){
    	for(var i in e.files){
	    	console.log(e.files[i]);
    	}
    }, function ( e ) {
    	console.log( "取消选择图片" );
    },{filter:"image",multiple:true});
}
	</script>
	</body>
</html>